<!DOCTYPE html>
<html lang="en" class="html">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big {
            width: 400px;
            height: 400px;
            background-color: red;
            padding: 100px;
            margin: 20px auto;
        }
        
        .middle {
            width: 200px;
            height: 200px;
            background-color: green;
            padding: 100px;
        }
        
        .small {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>

<body class="body">
    <div class="big">
        <div class="middle">
            <div class="small"></div>
        </div>
    </div>
</body>

</html>
<script>
    //一.事件绑定的两种方式。
    //1.普通事件DOM 0级事件
    //2.事件绑定DOM 2级事件
    //3.DOM 1级事件只是一个事件的规范，没有具体的实现。

    function addEvent(obj, etype, fn, bool) { //obj:元素对象 etype:事件类型  fn:事件处理函数  bool:是否捕获
        bool = bool || false; //早期设置默认值的方式。
        if (obj.addEventListener) { //标准浏览器
            obj.addEventListener(etype, fn, bool);
        } else { //IE浏览器
            obj.attachEvent('on' + etype, fn);
        }
    }

    var big = document.querySelector('.big');
    var middle = document.querySelector('.middle');
    var small = document.querySelector('.small');

    //事件处理函数
    function getClassName() {
        alert(this.className);
    }
    addEvent(small, 'click', getClassName, true)
    addEvent(middle, 'click', getClassName)
    addEvent(big, 'click', getClassName, true)
    addEvent(document.body, 'click', getClassName)
    addEvent(document.documentElement, 'click', getClassName, true)
    addEvent(document, 'click', function() {
        alert('document');
    });

    //html->big->small->middle->body->document
</script>